<template>
  <div>
    <LoginHeader />
    <div class="list">
      <form action="">
        <div class="account-number">
          <input
            type="text"
            placeholder="邮箱/手机/用户名"
            v-model="username"
          />
        </div>
        <div class="password">
          <input type="password" placeholder="密码" v-model="pass" />
        </div>

        <div class="submit">
          <input type="submit" value="登录" @click="submit" />
        </div>
      </form>
    </div>
    <div class="w-Mfoot">
      <p>
        <router-link to="/login">登录</router-link>
        <em>|</em>
        <router-link to="/register">注册</router-link>

        <em>|</em>
        <a href="">忘记密码</a>
        <em>|</em>
        <a href="">帮助</a>
        <em>|</em>
        <a href="">电脑版</a>
      </p>
      <p class="w-copyright">©3yx.com</p>
    </div>
  </div>
</template>

<script>
import { userLogin } from "../api/user";
import LoginHeader from "../components/Login-Header";
export default {
  components: {
    LoginHeader,
  },
  data() {
    return {
      username: "111",
      pass: "111",
    };
  },
  methods: {
    submit() {
      var Formmag = {
        username: this.username,
        pass: this.pass,
      };
      userLogin(Formmag).then((res) => {
        console.log(res);
        if (res.data.code) {
          let { token, userInfo } = res.data.data;
          this.$store.commit("user/initUserInfoMut", {
            ...userInfo,
            token,

          });
          this.$router.push("/personal");
        }
        
      });
      this.$store.commit('home/changehomenum',4)
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  form {
    .account-number {
      input {
        display: block;
        width: 96%;
        height: 45px;
        margin: 10px auto;
        border: 1px solid #d6d6d6;
        font-size: 14px;
        font-family: "microsoft YaHei";
        -webkit-box-sizing: border-box;
        background: #fff url("../assets/img/w_inputbg.png") no-repeat;
        background-position: 8px 12px;
        padding: 0 0 0 40px;
        // margin: 10px 0;
      }
      input:focus {
        background-position: 8px -74px;
      }
    }
    .password {
      //   background: #fff url("../assets/img/w_inputbg.png") no-repeat;
      //   background-position: 8px 12px;
      input {
        display: block;
        width: 96%;
        height: 45px;
        margin: 10px auto;
        border: 1px solid #d6d6d6;
        font-size: 14px;
        font-family: "microsoft YaHei";
        -webkit-box-sizing: border-box;
        background: #fff url("../assets/img/w_inputbg.png") no-repeat;
        background-position: 8px -33px;
        padding: 0 0 0 40px;
        // margin: 10px 0;
      }
      input:focus {
        background-position: 8px -127px;
      }
    }
    .submit {
      input {
        display: block;
        width: 96%;
        background: #e2574c;
        color: #fff;
        height: 40px;
        margin: 10px auto 10px auto;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        font-size: 1em;
        border: 0px;
      }
    }
  }
}
.w-Mfoot {
  text-align: center;
  bottom: 0;
  width: 100%;
  p {
    em {
      padding: 0 8px;
    }
    a {
      color: #666;
      font-size: 12px;
    }
  }
  .w-copyright {
    font-size: 12px;
    color: #666;
    // font-size: 1.2em;
    padding: 5px 0 10px 0;
  }
}
.el-message {
  top: 100px;
}
</style>